<template>
  <div>
    <div v-if="shows === 'list'">
      <Header>
        <el-button size="small" type="primary" @click="add">新建门店</el-button>
      </Header>
      <Header :type="'screening'" @tag="searchTag" @reset="reset">
        <div class="head-tit">
          内容筛选
        </div>

        <div class="head-operation">
          <span class="head-label">
            选择门店所在省：
          </span>

          <el-select
            v-model="province"
            size="small"
            class="head-input"
            placeholder="请选择"
            @change="selectTag($event, 1)"
          >
            <el-option
              v-for="item in optionsOne"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <span class="head-label">
            选择门店所在市：
          </span>
          <el-select
            v-model="city"
            size="small"
            class="head-input"
            placeholder="请选择门店所在市"
            @change="selectTag($event, 2)"
          >
            <el-option
              v-for="item in optionsTwo"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <span class="head-label">
            选择门店所在区：
          </span>
          <el-select
            v-model="area"
            size="small"
            class="head-input"
            placeholder="请选择门店所在区"
            @change="selectTag($event, 3)"
          >
            <el-option
              v-for="item in optionsThree"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="head-operation">
          <span class="head-label">
            搜索门店：
          </span>
          <el-input
            v-model="search"
            placeholder="请输入内容"
            size="small"
            class="head-select-input"
          >
            <el-select
              slot="prepend"
              v-model="select"
              style="width: 100px;"
              placeholder="请选择"
            >
              <el-option label="门店名称" value="1"></el-option>
              <el-option label="门店具体位置" value="2"></el-option>
              <el-option label="门店编号" value="3"></el-option>
            </el-select>
          </el-input>
        </div>
      </Header>
      <Main
        :data="listData"
        :footer-lock="totals > 10"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          width="30"
          :reserve-selection="true"
          type="selection"
        ></el-table-column>
        <el-table-column
          label="门店编号"
          align="center"
          property="store_number"
        ></el-table-column>

        <el-table-column
          label="门店名称"
          align="center"
          property="name"
        ></el-table-column>
        <el-table-column
          label="门店地址"
          align="center"
          property="address"
        ></el-table-column>
        <el-table-column
          label="门店排序"
          align="center"
          property="sort"
        ></el-table-column>
        <el-table-column label="门店状态" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              style="display: block"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-text="scope.row.status == 0 ? '关' : '开'"
              @change="switchTag(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          width="200"
          class-name="tableoperation"
        >
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="edit(scope.row)">
              编辑
            </el-button>
            <el-button size="mini" type="text" @click="del(scope.row.store_id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </Main>
      <Footer :total="totals">
        <el-pagination
          :page-size="10"
          layout="prev, pager, next"
          :total="totals"
          @current-change="changes"
        >
        </el-pagination>
      </Footer>
    </div>
    <stores-form v-if="shows === 'form'" :data-msg="dataMsg" @out="out" />
  </div>
</template>
<script>
import { STORE_LIST, STORE_STATUS, DEL_STORE } from "../service";
import { FOURLEVELLINKAGE } from "@/service/public";

export default {
  components: {
    storesForm: () => import("./form")
  },
  data() {
    return {
      allList: [],
      getRowKeys(row) {
        return row.store_id;
      },
      search: "",
      select: "",
      listData: [],
      totals: 0,
      pages: 1,
      shows: "list",
      optionsOne: [],
      optionsTwo: [],
      optionsThree: [],
      province: "",
      city: "",
      area: "",
      dataMsg: {}
    };
  },
  created() {
    this.getList();
    this.getAddress();
  },
  methods: {
    handleSelectionChange(v) {
      this.allList = v;
    },
    add() {
      this.shows = "form";
    },
    edit(e) {
      this.shows = "form";
      this.dataMsg = e;
    },
    selectTag(e, i) {
      let json = {};
      switch (i) {
        case 1:
          json.oneid = e;
          this.optionsTwo = [];
          this.optionsThree = [];
          this.city = "";
          this.area = "";
          break;
        case 2:
          json.twoid = e;
          this.optionsThree = [];
          this.area = "";
          break;
      }
      if (e) {
        this.getAddress(json, i);
      } else {
        this.getAddress();
      }
    },
    searchTag() {
      this.pages = 1;
      this.getList();
    },
    reset() {
      this.pages = 1;
      this.province = "";
      this.city = "";
      this.area = "";
      this.search = "";
      this.getList();
    },
    async getAddress(obj, num) {
      await FOURLEVELLINKAGE(obj).then(res => {
        let { code, data, msg } = res;
        if (code === 200) {
          if (num === 1) {
            this.optionsTwo = data;
            this.optionsTwo.unshift({ id: "", name: "门店所在市" });
          } else if (num === 2) {
            this.optionsThree = data;
            this.optionsThree.unshift({ id: "", name: "门店所在区" });
          } else {
            this.optionsOne = data;
            this.optionsOne.unshift({ id: "", name: "门店所在省" });
          }
        } else {
          this.$message.error(msg);
        }
      });
    },
    async getList() {
      await STORE_LIST({
        page: this.pages,
        pageshow: 10,
        province: this.province,
        city: this.city,
        area: this.area,
        name: this.search
      }).then(res => {
        let { code, data } = res;
        if (code === 200) {
          this.totals = data.count;
          data.data.forEach(ele => {
            if (ele.status === 1) {
              ele.status = true;
            } else {
              ele.status = false;
            }
          });
          this.listData = data.data;
        } else {
          this.listData = [];
        }
      });
    },
    changes(page) {
      this.pages = page;
      this.getList();
    },
    async switchTag(e) {
      await STORE_STATUS({
        store_id: e.store_id,
        status: e.status ? 1 : 0
      }).then(res => {
        let { code, msg } = res;
        this.$message({
          message: msg,
          type: code === 200 ? "success" : "error"
        });
      });
    },
    out() {
      this.shows = "list";
      this.dataMsg = "";
      this.getList();
    },
    async del(storeId) {
      await this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          DEL_STORE({
            store_id: storeId
          }).then(res => {
            let { code, msg } = res;
            if (code === 200) {
              this.getList();
            }
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        })
        .catch(() => {
          this.$message.info("已取消!");
        });
    }
  }
};
</script>
